<template>
    <div class="content">
        <div class="w100 haed bbg pr">
            <img @click="goHome" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">维修任务</p>
        </div>
        <main class="pr">
            <div class="search pr mb30">
                <input class="w100" placeholder="输入需要搜索的内容" type="text" v-model="search">
                <a href="#" class="pa" @click="onSearch">
                    <img src="../../assets/img/maintain/search.png">
                </a>
            </div>
            <div class="nav">
                <span>共{{total}}条</span>
                <div class="type">
                    <span>状态</span>
                    <el-dropdown trigger="click"  placement="bottom" @command="typeCommand" style="font-size: 24rem;">
                        <p class="el-dropdown-link">{{ typeHTML }}<img src="../../assets/img/maintain/icon-jt.png" alt=""></p>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">
                                <p style="text-align: center;" @click="typeHTML = '全部'">全部</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="1">
                                <p style="text-align: center;" @click="typeHTML = '未支付'">未支付</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="2">
                                <p style="text-align: center;" @click="typeHTML = '已支付'">已支付</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="3">
                                <p style="text-align: center;" @click="typeHTML = '已完成'">已完成</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="4">
                                <p style="text-align: center;" @click="typeHTML = '已取消'">已取消</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="5">
                                <p style="text-align: center;" @click="typeHTML = '已退款'">已退款</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="way">
                    <span>维修方式</span>
                    <el-dropdown trigger="click" placement="bottom" @command="wayCommand" style="font-size: 24rem;">
                        <p class="el-dropdown-link">{{wayHTML}}<img src="../../assets/img/maintain/icon-jt.png" alt=""></p>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">
                                <p style="text-align: center;" @click="wayHTML = '全部'">全部</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="1">
                                <p style="text-align: center;" @click="wayHTML = '到店维修'">到店维修</p>
                            </el-dropdown-item>
                            <el-dropdown-item command="2">
                                <p style="text-align: center;" @click="wayHTML = '上门取车'">上门取车</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="date">
                    <img src="../../assets/img/maintain/icon-date.png" alt="">
                    <span :value="query.date" @click="show = true">日期</span>
                </div>
            </div>
            <Calendar v-model="show" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
            <!-- 列表 -->
            <ul class="list">
                <li class="brs" v-for="el in typeListArr" :key="el.id">
                    <div class="list-top">
                        <h1>维修单号: {{el.orderCode}}</h1>
                        <span>{{ el.orderStatus | orderStatus }}</span>
                    </div>
                    <div class="list-bot">
                        <div>
                            <p>维修方式: {{el.serviceItem}}</p>
                            <p>预约日期: {{el.bookingTime | formDate}}</p>
                        </div>
                        <button @click="lookDetail(el)" >查看详情</button>
                    </div>
                </li>
            </ul>
       </main>
    </div>
</template>
<script>
import {maintainOrder} from '../../api/index'
import { Calendar } from 'vant';
import 'vant/lib/calendar/style';
export default{
    components: { Calendar},
    data(){
        return{
            query:{
                type:'1',
                way:'1',
                date:''
            },
            search:'',  // 搜索框数据
            listArr:[],   //  所有数据
            typeHTML:'全部',  //  下拉状态选择的内容
            wayHTML:'全部',  // 下拉维修方式选择的内容
            show: false,   //  控制日期组件的显示
            typeListArr:[],  //  过滤的数据
            total:0,  //  总条数
            //   日期范围
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2120, 0, 31),
        }
    },
    mounted(){
        //  获取维修数据
        // this.listArr = this.$route.params.data;
        // this.typeListArr = this.listArr;

        // //  获取维修数据
        maintainOrder({
            businessId:JSON.parse(localStorage.getItem('ID'))
        })
        .then(r=>{
            console.log(r);
            this.listArr = r.data;
            this.typeListArr = this.listArr;
            this.total = this.typeListArr.length;
        })
    },
    methods:{
        //  跳到查看详情
        lookDetail(el){
            this.$router.push({
                path:'/maintainDetail',
                query:{el}
            })
        },
        // 搜索
        onSearch(){
            maintainOrder({
                businessId:JSON.parse(localStorage.getItem('ID')),
                queryInfo:this.search
            })
            .then(r=>{
                console.log(r);
                this.typeListArr = r.data;
                this.total = this.typeListArr.length;
            })
        },
        //  后退
        goHome(){
            this.$router.push('/');
        },
        typeCommand(command) {
            if(command == 1){
                this.typeListArr = this.listArr.filter(el =>{
                    return el.orderStatus == 0;
                })
            }else if(command == 2){
                this.typeListArr = this.listArr.filter(el =>{
                    return el.orderStatus == 1;
                })
            }else if(command == 3){
                this.typeListArr = this.listArr.filter(el =>{
                    return el.orderStatus == 2;
                })
            }else if(command == 4){
                this.typeListArr = this.listArr.filter(el =>{
                    return el.orderStatus == 3;
                })
            }else if(command == 5){
                this.typeListArr = this.listArr.filter(el =>{
                    return el.orderStatus >= 4;
                })
            }else{
                this.typeListArr = this.listArr
            }
            this.total = this.typeListArr.length;
        },
        wayCommand(command) {
            this.query.way = command;
        },
        // 过滤时间
        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
        onConfirm(date){
            this.show = false;
            this.query.date = this.formatDate(date);
            console.log(date);
            var date1 = this.getDate(new Date(date).getTime());
            this.typeListArr = this.listArr.filter(el =>{
               let date = this.getDate(el.bookingTime); 
                    return date == date1;
                })
        },
        //  时间改为年月日
        getDate(data) {
            const d = new Date(data); // val 为表格内取到的后台时间
            const month =d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
            const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
            const times = `${d.getFullYear()}-${month}-${day}`;
            // console.log(times);
            return times;
        }, 
    },
    filters:{
        // 时间数据过滤
        formDate(val) {
            const d = new Date(val); // val 为表格内取到的后台时间
            const month =d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
            const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
            const hours = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
            const min = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
            const sec = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
            const times = `${d.getFullYear()}-${month}-${day} ${hours}:${min}:${sec}`;
            return times;
        },
        //  过滤类型
        orderStatus(val){
            if(val == 0){
                return '未支付'
            }else if(val == 1){
                return '已支付'
            }else if(val == 2){
                return '已完成'
            }else if(val == 3){
                return '已取消'
            }else{
                return '已退款'
            }
        }
    }
}
</script>
<style scoped>
main{margin: -287rem 0 0 0;}
main .search{padding: 0 40rem;}
main .search input{height: 80rem;border-radius: 40rem;padding: 0 28rem;box-sizing: border-box;border: none;outline: none;font-size: 22rem;color: #c3c3c3;background-color: #f7f7f7;}
main .search input::-webkit-input-placeholder{color: #c3c3c3;}
main .search a{display: block;top: 27rem;right: 76rem;width: 27rem;height: 27rem;}
main .search a img{width: 100%;}

main .nav{display: flex;font-size: 26rem;padding: 0 50rem 0 55rem;justify-content: space-between;color: #fff;line-height: 28rem;margin-bottom: 21rem;}
main .nav .type span,main .nav .way span{text-align: center;display: block;margin-bottom: 10rem;}
main .nav div p{font-size: 22rem;padding: 15rem 0;background-color: rgba(0, 0, 0, 0.1);border-radius: 27rem;line-height: 23rem;width: 192rem;text-align: center;}
main .nav div p img{margin-left: 10rem;vertical-align: middle;width: 16rem;height: 10rem;}
main .nav .date img{width: 26rem;height: 26rem;vertical-align: middle;}
>>> .el-dropdown-menu__item{font-size: 24rem;line-height: 60rem;color: #333;padding: 0 20rem;}
>>> .el-dropdown-menu{padding: 10rem 0;margin: 5rem 0;border: 1rem;border-radius: 4rem;} 
>>> .el-popper{margin-top: 12rem;}
>>> .popper__arrow{text-align: center;}
>>> .el-popper[x-placement^=bottom] .popper__arrow{top:6rem;margin-right: 3rem;}
.el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 26px;
  }

.list{margin: 0 20rem;}
.list li{padding: 38rem 27rem 43rem 28rem;background-color: #fff;margin-bottom: 20rem;}
.list li .list-top{display: flex;justify-content: space-between;align-items: end;padding: 0 10rem 18rem 3rem;border-bottom: 7rem solid #f7f7f7;}
.list li .list-top h1{font-size: 26rem;font-weight: normal;line-height: 26rem;}
.list li .list-top span{font-size: 20rem;line-height: 20rem;color: #1168ea;}
.list li .list-bot{display: flex;justify-content: space-between;align-items: center;padding: 30rem 3rem 0;}
.list li .list-bot p{font-size: 24rem;line-height: 24rem;}
.list li .list-bot p:first-child{margin-bottom: 30rem;}
.list li .list-bot button{font-size: 24rem;line-height: 24rem;padding: 13rem 0;border-radius: 25rem;border: none;background-color: #0863e7;color: #fff;width: 150rem;}
</style>